import { DeleteOutlined } from "@ant-design/icons";
import { List } from "antd";

export function TodoList({
  todoList,
  deleteTodo,
}: {
  todoList: string[];
  deleteTodo: (index: number) => void;
}) {
  return (
    <List
      size="large"
      header={<div>TodoList</div>}
      bordered
      dataSource={todoList}
      renderItem={(item, index) => (
        <List.Item className="item">
          <span>{item}</span>
          <DeleteOutlined
            className="delete"
            onClick={() => {
              deleteTodo(index);
            }}
          />
        </List.Item>
      )}
    />
  );
}
